<template>
	<view class="container">
		<!-- 头部 -->
		<v-index-top :bannerData="banners"></v-index-top>

		<view class="wraper">
			<view class="tab">
				<view  class="tab_item" @tap="jumpTo('/pages/index/sign-in/sign-in')">
					<img class="icon" src="/static/edu/index/timetable.png" mode=""></img>
					<text>考勤</text>
				</view>
			<!-- 	<view  class="tab_item" @tap="jumpTo('/pages/index/weekplan/weekplan')">
					<img class="icon" src="/static/edu/index/subscribe.png" mode=""></img>
					<text>教学计划</text>
				</view> -->
				<view  class="tab_item" @tap="jumpTo('/pages/index/dynamic/dynamic')">
					<img class="icon" src="/static/edu/phone-icon.png" mode=""></img>
					<text>萌宝动态</text>
				</view>
				<view  class="tab_item" @tap="jumpTo('/pages/index/record/record')">
					<img class="icon" src="/static/contract.png" mode=""></img>
					<text>萌宝日记</text>
				</view>
				<view  class="tab_item" @tap="jumpTo('/pages/index/notice/notice')">
					<img class="icon" src="/static/personal/index/notice.png" mode=""></img>
					<text>消息通知</text>
				</view>
			</view>
		</view>
		
		<view class="content">
			<view v-if='!noDate'>
				<view  class="dynamic-box" v-for="(moment,index) in momentList" :key="index">
					<text class="line-box"></text>
					<view class="photo-box">
						<view class="tits">
							<image src="https://storage.ganorglobal.com/miniapp-service/static/pub-img/red_round.png" mode=""></image>
							<!-- <view class="titles">{{item.title}}</view> -->
						</view>
						
						<view class="classname" @click="dynamic_info(moment)">
							<block>
								<image v-if="moment.teacher_avatar" class="classname_img" :src="moment.teacher_avatar" mode="" ></image>
								<image v-else class="classname_img" :src="default_avatar" mode="" ></image>
							</block>
						</view>
						<text class="one-text"  @click="dynamic_info(moment)">{{moment.content}}</text>
						<view class="min-box" v-if="moment.photo.length>0">
							<view class="flex-box" v-for="(photoObj,currIndex) in moment.photo" :key="currIndex">
								<image :src="photoObj" mode="aspectFill" @click="open_pw(photoObj,currIndex)"></image>
								<!-- <video v-if="photoObj.photo_type == 2"  :src="photoObj.photo_url"></video> -->
							</view>
						</view>		
						<view class="ments_main">
							 <text>{{moment.created_at}}</text>
							 
						</view>
					</view>
				</view>
			</view>
			
			<no-data v-if="noDate"></no-data>
		</view>
		<rwj-tabbar :current-page="1"></rwj-tabbar>  
		<upgradepage></upgradepage>
	</view>
</template>

<script>
	import indexTop from '../component/index-top.vue'
	import dialogBox from '../component/dialog.vue'
	import copyRight from '../../components/copyright.vue'
	import upgradepage from '../../components/updatepage.vue';
	export default {
		components: {
			"v-index-top": indexTop,
			dialogBox,
			copyRight,
			upgradepage
		},

		data() {
			return {
				inShow: true,
				userInfo : {},
				currentCustomer : {},
				banners : [],
				colors : ['a-tangerine','a-yellow','a-blue','a-green','a-gray'],
				care_ones : [],
				care_twos : [],
				care_threes : [],
				moments : [],
				news : [],
				notices : [],
				activityList : [],
				currentTime : '',
				dialogTitle : '',
				dialogCotent : '',
				dialogShow : false,
				dialogBtn : '',
				wholeName : this.config.DEFAULT_EDU_COURSE_SERIES_NAME_WHOLE,
				bodyName : this.config.DEFAULT_EDU_COURSE_SERIES_NAME_BODY,
				orffName : this.config.DEFAULT_EDU_COURSE_SERIES_NAME_ORFF,
				wholeImg : this.config.DEFAULT_EDU_COURSE_SERIES_WHOLE,
				bodyImg : this.config.DEFAULT_EDU_COURSE_SERIES_BODY,
				orffImg : this.config.DEFAULT_EDU_COURSE_SERIES_ORFF,
				courseList:[],   //课程体系
				showParentPage:true,
				momentList : [],
				pageIndex : 1,
				pageSize : 10,
				loading : true,
				noDate : true,
				timeLine:""
			}
		},
		onLoad() {
			this.userInfo = getApp().globalData.userInfo;
			this.currentCustomer = getApp().globalData.currentCustomer;
			// this.userInfo = getApp().globalData.userInfo || uni.getStorageSync('userInfo');
			// this.currentCustomer = getApp().globalData.currentCustomer || uni.getStorageSync('currentCustomer');
			let date = new Date();
			this.currentTime = this.dateFormat(date,'yyyy-MM-dd hh:mm:ss');
			//早教首页数据
			
			this.timeLine = Math.floor(Number(date/1000));
			this.getIndexData();
		},
		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
				  tabbarIndex: 1
				})
			 }
			this.userInfo = getApp().globalData.userInfo;
			this.currentCustomer = getApp().globalData.currentCustomer;
			// console.log( getApp().globalData)

			if (!this.userInfo) {
				uni.redirectTo({
					url:'../login/login-wx'
				})
				return ;
			}
			this.getMomentList()
		},
		onReachBottom() {
			//上拉加载下一页
			this.getMomentList();
		},
		onPullDownRefresh() {
			
			
			setTimeout(function(){
				uni.stopPullDownRefresh()
			},1000)
			let date = new Date();
			this.currentTime = this.dateFormat(date,'yyyy-MM-dd hh:mm:ss');
			//早教首页数据 
			this.timeLine = Math.floor(Number(date/1000));
			this.momentList = [];
			this.pageIndex = 1;
			this.loading = true;
			this.getMomentList();
			this.getIndexData();
		},
		methods: {
			timestampToDate (timestamp){
				if (timestamp) {
					return this.dateFormat((new Date(timestamp*1000)),'MM:dd hh:mm')
				}
				return '';
			},
			getMomentList() {
				if (this.currentCustomer.class_id == '') {
					uni.showToast({
						icon:'none',
						title:'您的宝宝还未加入班级'
					})
					this.noDate = true;
					return ;
				};
				let _this = this;
				if (!_this.loading) {
					return ;
				}
				uni.showLoading({
					title:'加载中...'
				})
				let params = {
					page : this.pageIndex++,
					limit : this.pageSize
				};
				_this.loading = false;
				_this.common.http.request('/moment/classes','GET',params,res => {
					_this.loading = true;
					if (res.data.code == 0) {
						if (res.data.data.total>0) {
							_this.noDate = false;
						} 
						if (res.data.data.list && res.data.data.list.length > 0) {
							res.data.data.list.map(item => {
								_this.momentList.push(item);
							})
						} else {
							_this.loading = false;
						
						}
					} else {
						uni.showToast({
							icon:'none',
							title:'获取动态列表失败：' + res.data.message + '(' + res.data.code + ')'
						});
					}
					uni.hideLoading();
				})
			},
		
			
			getIndexData() {
				this.banners.push({
					banner_image: this.config.DEFAULT_BANNER
				})
				return
				// uni.showLoading({
				// 	title:'加载中...'
				// })
				let _this = this;
				let param = {
					customer_id : _this.currentCustomer.customer_id,
				}
				this.common.http.request('/api/v1/wx/index/edu','GET',param,res => {
					let data = res.data.data;
					if (res.data.code == 0) {
						// _this.banners = data.banners;
						let defaultBanners = []
						let schoolBannsers = []
						if(data.banners.length > 0) {
							data.banners.forEach(b => {
								if(b.is_sys == 1) {
									defaultBanners.push(b)
								} else {
									schoolBannsers.push(b)
								}
							})
							if(schoolBannsers.length == 0){
								schoolBannsers = defaultBanners
							}
							_this.banners = schoolBannsers;
						}
						console.log('_this.banners',_this.banners)
						if(_this.banners.length == 0){
							_this.banners.push({
								banner_image:'https://storage.ganorglobal.com/static/daily/default_banner.png'
							})
						}
						_this.moments = data.moments;
					}
					uni.hideLoading()
				});
			},
		
		
		
			jumpTo (url,index) {
				uni.navigateTo({
					url:url,
					fail(e) {
						if (e.errMsg == 'navigateTo:fail can not navigateTo a tabbar page') {
							uni.switchTab({
								url:url
							})
						}
					}
				})
			},
		// 打开图片
			open_pw(item,index) {
				// this.switch_pw = true
				// this.pw_img = arr;
				let imgs = []
				imgs.push(item)
				uni.previewImage({
					urls:imgs,
					current:index
				})
			},
			// 关闭大图弹层
			down_pw() {
				this.switch_pw = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
				 .dynamic-box {
				 	width:94%;
				 	position: relative;
				 	margin: 60rpx auto 40rpx;
				 	.line-box {
				 		position: absolute;
				 		width: 4rpx;
				 		height: 95%;
				 		background:rgba(204,204,204,0.4);
				 		left: 8rpx;
				 		top: 52rpx;
				 	}
				 	.photo-box {
				 		padding-left: 40rpx;
				 		margin-top:10rpx;
						.tits{
							position:relative;
							.titles{
								font-size:36rpx;
								color:#333;
							}
							image{
								width: 80rpx;
								height:80rpx;
								position:absolute;
								left:-70rpx;
								top:-16rpx;
							}
						}
						.classname{
							font-size:24rpx;color:#8E8E93;
							margin: 20rpx 0;
							display: flex;
						}
						.classname_img{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 10rpx;
						}
				 		.one-text {
				 			font-size: 28rpx;
				 			font-family: PingFangSC-Regular, PingFang SC;
				 			font-weight: 400;
				 			color:#999999;
				 			display: block;
				 		}
				 		.min-box {
				 			display: flex;
				 			flex-wrap: wrap;
				 			.flex-box {
				 				width: 220rpx;
				 				image {
				 					width: 208rpx;
				 					height: 200rpx;
				 					margin: 20rpx auto 0;
				 					display: block;
				 				}
				 			}
				 			.rt_box{
				 				width:68%;
				 				.rt_tit{
				 					font-size:32rpx;
				 					color:rgba(51,51,51,1);
				 				}
				 			}
				 		}
						.ments_main{
							width:98%;
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
							margin-top:20rpx;
							color: #999;
							.ments_share{
								display:flex;
								justify-content: flex-start;
								align-items: center;
							}
						}
				 	}
				 }
	}
	.a-tangerine {
		background-color: #FF9F68 !important;
	}
	.a-yellow {
		background-color: #FFCD51 !important;
	}
	.a-blue {
		background-color: #95C9EF !important;
	}
	.a-green {
		background-color: #78D5D7 !important;
	}
	.a-gray {
		background-color: #889BBF !important;
	}
	.container{
		margin-bottom: 120rpx;
		.banner_wraper{
			position: absolute;
			top: 150rpx;
			padding: 20rpx;
			.banner{
				width: 706rpx;
				height: 318rpx;
			}
		}
		.wraper{
			margin:4%;
			.tab{
				padding:0 20rpx  40rpx;
				display: flex;
				justify-content: space-between;
				.tab_item{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					height: 130rpx;
					font-size: 28rpx;
					font-weight:400;
					color:#264273;
					.icon{
						height: 60rpx;
						width: 60rpx;
					}
				}
			}
			.series{
				.series_title{
					padding: 20rpx 0;
					display: flex;
					height: 67rpx;
					line-height: 49rpx;
					justify-content: space-between;
					.icon{
						width:52rpx;
						height:52rpx;
					}
					.title{
						margin-left:16rpx ;
						height:67rpx;
						text-align: center;
						font-size:35rpx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						color:rgba(51,51,51,1);
						line-height:49rpx;
					}
				}
				.series_item{
					margin-top: 43rpx;
					display: flex;
					justify-content: space-between;
					.course{
						// display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: center;
						.cover{
							width:210rpx;
							height:283rpx;
							border-radius:25rpx 94rpx 25rpx 25rpx;
						}
						.name{
							margin: 30rpx;
							font-size:26rpx;
							font-family:PingFangSC-Medium,PingFang SC;
							font-weight:500;
							color:rgba(51,51,51,1);
						}
					}
					.series_item_default{
						display:flex;
						justify-content: space-between;
					}

				}
			}
			.activity{
				margin-top: 40rpx;
				.activity_title{
					padding: 20rpx 0;
					display: flex;
					height: 67rpx;
					line-height: 49rpx;
					justify-content: space-between;
					.icon{
						width:52rpx;
						height:52rpx;
					}
					.title{
						margin-left:16rpx ;
						height:67rpx;
						font-size:35rpx;
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						color:rgba(51,51,51,1);
						line-height:49rpx;
					}

				}
				.activity_wraper{
					background: #fff;
					margin-top: 43rpx;
					width:690rpx;
					height:458rpx;
					border-radius:20rpx;
					box-shadow: 0rpx 0rpx 10rpx rgba(239,99,55,1);
					.item_title{
						width:690rpx;
						height:117rpx;
						padding: 30rpx;
						border-radius:20rpx 20rpx 0rpx 0rpx;
						color: #fff;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
					.activity_detail{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 40rpx 30rpx;
						.room{
							height:37rpx;
							font-size:26rpx;
							font-family:PingFangSC-Medium,PingFang SC;
							font-weight:500;
							color:rgba(51,51,51,1);
							line-height:37rpx;
						}
						.time{
							height:33rpx;
							font-size:24rpx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(142,142,147,1);
							line-height:48rpx;
							.time-title {
								line-height: 60rpx;
							}
							.time-time {
								width: 300rpx;
								line-height: 30rpx;
								font-size: 22rpx;
							}
						}
						.btn{
							width:120rpx;
							height:52rpx;
							color: rgba(255,255,255,1);
							border-radius:11rpx;
						}
						.timetable{
							width: 100%;
						}
					}
					.activity_address{
						height:148rpx;
						margin: 30rpx;
						padding: 33rpx;
						background:rgba(248,248,248,1);
						border-radius:20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.address{
							display: flex;
							align-items:center;
							.icon {
								margin-right: 15rpx;
								width: 52rpx;
								height: 52rpx;
							}
						}
						.connect{
							color:rgba(255,149,0,1);
						}
					}
				}
			}
		}
	}
	.copyright-box{
		margin-bottom:20rpx;
	}
	.copyright-box-empty{
		margin-bottom:20rpx;
	}
 </style>
